<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body, p {margin: 0; padding: 0;}
		div {width:400px; height:400px; background-color: #45dfff; margin: 20px;}

		/* 加和不加overflow的区别很大 */

		p {width: 100px; height: 100px; background-color: red; margin: 10px; position: absolute; left: 0; top: 0;}
	</style>
	<script>
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		var oP = document.getElementById('p1');

		alert( getStyle(oP, 'left') )		//0px
		alert(oP.offsetLeft)				//10
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<div id="div1">
		<p id="p1"></p>
	</div>
</body>
</html>